<template>
  <div>
    <h1>class</h1>
    <div :class="{ active: isActive }"></div>
    <div :class="[activeClass]"></div>
    <h2>style</h2>
    <div :style="{ color: activeColor, fontSize: fontSize }">1111</div>
    <div :style="[activeStyle]">2222222222</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      activeClass: 'active',
      activeColor: 'red',
      fontSize: '30px',
      activeStyle: {
        color: 'green'
      }
    }
  }
 }
</script>

<style lang="less" scoped>
.active {
  height: 20px;
  width: 20px;
  border: 1px solid red;
}
</style>